<template>
	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>

	<view class="container">

		<view class="page-title">字体大小设置{{fontSizeStore.currentFontSizeRpx}}</view>

		<!-- 实时预览区域 -->
		<view class="preview-box">
			<view class="preview-title">预览效果</view>
			<view class="preview-content">
				<view>这是一段预览文字，展示当前字体大小</view>
				<view>切换模式时，这里的文字会实时变化</view>
			</view>
		</view>

		<!-- 模式选择区域 -->
		<view class="mode-selector">
			<view class="mode-item" v-for="mode in fontSizeStore.allModes" :key="mode.value"
				@click="handleModeChange(mode.value)" :class="{ active: fontSizeStore.displayMode === mode.value }">
  <text :class="['iconfont person-item', mode.icon ? mode.icon : '']"></text>

				<text class="mode-text">{{ mode.label }}</text>
				<!-- 修复Radio点击问题：移除阻止点击的样式，添加独立事件处理 -->
				<radio :value="mode.value" :checked="fontSizeStore.displayMode === mode.value" class="mode-radio"
					@click.stop="handleRadioClick(mode.value)"></radio>
			</view>
		</view>

		<view class="tips">设置将应用于整个应用</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		nextTick
	} from 'vue';
	import {
		useFontSizeStore
	} from '@/stores/fontSizeStore';

	import {
		useRouter
	} from 'uni-mini-router'
	const router = useRouter();
	const fontSizeStore = useFontSizeStore();

	// 页面加载时初始化
	onMounted(() => {
		fontSizeStore.loadFromStorage();
	});

	// 处理整个选项行的点击
	const handleModeChange = async (mode) => {
		await changeMode(mode);
	};

	// 处理Radio本身的点击（独立事件）
	const handleRadioClick = async (mode) => {
		await changeMode(mode);
	};

	// 统一的模式切换逻辑
	const changeMode = async (mode) => {
		// 只有当模式不同时才执行切换
		if (fontSizeStore.displayMode !== mode) {
			fontSizeStore.setDisplayMode(mode);
		
			await nextTick(()=>{
				uni.showToast({
					title: `已切换到${fontSizeStore.currentModeConfig.label}`,
					icon: 'none',
					duration: 400
				});
				router.pushTab({
					name: "mine"
				})
			}); // 确保DOM更新
		

		}
	};
</script>

<style scoped lang="less">
	@import '@/static/styles/colors.less';
	@import '@/static/styles/constants.less';
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.page-title {
		font-size: 1.2rem;
		font-weight: bold;
		text-align: center;
		margin: 20rpx 0 40rpx;
	}

	.preview-box {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		// border: 1rpx solid @color-border
		.border_shadow();
		margin-bottom: 30rpx;
	}

	.preview-title {
		font-size: 1rem;
		font-weight: 600;
		margin-bottom: 20rpx;
		color: #333;
	}

	.preview-content {
		line-height: 1.8;
		color: #666;
		font-size: 1rem;
	}

	.mode-selector {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
		.border_shadow()
	}

	.mode-item {
		display: flex;
		padding: 25rpx 30rpx;
		border-bottom: 1px solid #eee;
		cursor: pointer;
		transition: background-color 0.2s;
	}

	.mode-item:last-child {
		border-bottom: none;
	}

	.mode-item:active {
		background-color: #f0f0f0;
	}

	.mode-item.active {
		background-color: #d8d8d8;
	}

	/* 关键修复：确保Radio可点击，移除阻止点击的样式 */
	.mode-radio {
		width: 70rpx;
		height: 70rpx;
		margin-right: 20rpx;
		/* 移除可能存在的pointer-events: none */
		pointer-events: auto;
		/* 确保Radio在最上层 */
		position: relative;
		z-index: 10;
	}

	.mode-radio[checked] {
		color: #1677ff;
	}

	.mode-text {
		font-size: 1rem;
		margin-left: 10px;
		flex: 1;
		height: 70rpx;
		line-height: 70rpx;
		    vertical-align: middle;
		/* padding: 30rpx 0; */
	}

	.tips {
		color: #999;
		font-size: 0.85rem;
		text-align: center;
		margin-top: 20rpx;
	}
	.person-item{
		font-size: 50rpx!important;
	}
</style>